$grid-prefix: $css-prefix;

.#{$grid-prefix}card {
    background: #fff;
    border-radius: px-or-rem(4);
    font-size: px-or-rem(14);
    position: relative;
    transition: all .2s ease-in-out;
}
.#{$grid-prefix}card-head {
    border-bottom: px-or-rem(1) solid #e8eaec;
    padding: px-or-rem(12) px-or-rem(14);
    line-height: 1;
    p{
        display: inline-block;
        width: 100%;
        height: px-or-rem(20);
        line-height: px-or-rem(20);
        font-size: px-or-rem(14);
        color: #17233d;
        font-weight: 700;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}
.#{$grid-prefix}card-bordered {
    border: px-or-rem(1) solid #dcdee2;
    border-color: #e8eaec;
}
.#{$grid-prefix}card-shadow {
    box-shadow: 0 px-or-rem(1) px-or-rem(6) rgba(0,0,0,.2);
    border-color: #eee;
}
.#{$grid-prefix}card-hover:hover {
    box-shadow: 0 px-or-rem(1) px-or-rem(6) rgba(0,0,0,.2);
    border-color: #eee;
}
.#{$grid-prefix}card-body {
    padding: px-or-rem(16);
}
.#{$grid-prefix}card-tips {
    position: absolute;
    right: px-or-rem(16);
    top: px-or-rem(16);
    color: $primary-color;
    cursor: pointer;
}